import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaErrorPage, WeaDialog, WeaTop, WeaRightMenu, WeaLocaleProvider } from 'ecCom';
import { Button, Modal } from 'antd';
import { toJS } from 'mobx';
import EditTemp from './EditTemp';
import { WeaTableNew } from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
const confirm = Modal.confirm;
const getLabel = WeaLocaleProvider.getLabel;

@inject('smsTempStore')
@observer
class SmsTempList extends React.Component {
	constructor(props) {
    	super(props);
	    this.state = {
			  visible: false,
			  isSingle: false,
	    };
	  }

	componentDidMount() {

	 }
	 componentWillReceiveProps(nextProps) {
		 if (nextProps.isSingle) {
			this.setState({ isSingle: nextProps.isSingle });
			const { smsTempStore } = this.props;
			smsTempStore.doLoading();
		 } else {
			this.setState({ visible: nextProps.visible });
		 }
	 }
    render() {
		let title = getLabel(518871, '短信模板维护');
		const { smsTempStore } = this.props;
		const { dataKey, comsWeaTableStore, loading } = smsTempStore;
		// const tableNow = comsWeaTableStore.state[dataKey.split('_')[0]] || comsWeaTableStore.state['init'];
		const tableKey = dataKey !== '0' ? dataKey.split('_')[0] : 'init';
		const selectedRowKeys = toJS(comsWeaTableStore).selectedRowKeys;
		let color = '#2db7f5';
		if (selectedRowKeys.length === 0) {
			color = '#b2b2b2';
		} else {
			color = '#2db7f5';
		}
        return (
            <div className="" >
				<EditTemp ecId={`${this && this.props && this.props.ecId || ''}_EditTemp@lqxfrv`}
  visible={smsTempStore.showEdit}
  doRefresh={this.refreshList}
  doClose={() => {
						smsTempStore.closeTempData();
					}}
				/>
				{this.state.isSingle &&
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@0oyat2`} datas={this.getRightMenu(dataKey, comsWeaTableStore)} onClick={this.onRightMenuClick.bind(this)}>
					<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@8km9ud`}
  title={title}
  loading={smsTempStore.loading}
  icon={<i className="icon-coms-message" />}
  iconBgcolor="#0079de"
  buttons={this.getTopButtons(dataKey, comsWeaTableStore)}
  showDropIcon={true}
  dropMenuDatas={this.getRightMenu(dataKey, comsWeaTableStore)}
  onDropMenuClick={this.onRightMenuClick.bind(this)}
					>
						<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@h6ney7`}
  needScroll={true}
  sessionkey={dataKey}
  hasOrder={true}
  onOperatesClick={this.onOperatesClick}
  comsWeaTableStore={comsWeaTableStore}
  getColumns={this.getNewColumns}
						/>
					</WeaTop>
				</WeaRightMenu>
				}
				{!this.state.isSingle &&
				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@fub9hg`}
  visible={this.state.visible}
  title={title}
  icon="icon-coms-message"
  iconBgcolor="#0079de"
  className="sms-templist"
  buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9eexxd@closeBtn`} type="ghost" onClick={() => { this.doClose(); }}>{getLabel(309, '关闭')}</Button>]}
  style={{ width: '800px', height: '520px' }}
  onCancel={this.doClose}
  doRefresh={this.doRefresh}
  loading={loading}
				>
					<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@9xhjfu`} datas={this.getRightMenu(dataKey, comsWeaTableStore)} onClick={this.onRightMenuClick.bind(this)}>
						<div className="top-bar">
							<div style={{ float: 'right', marginRight: '10px' }}>
								<div className="icon-coms-Add-to-hot top-btn" onClick={() => { this.onRightMenuClick('0'); }} />
								<div className="icon-coms-form-delete-hot top-btn" style={{ marginLeft: '10px', color: selectedRowKeys.length === 0 ? '#b2b2b2' : '#2db7f5' }} onClick={() => { selectedRowKeys.length != 0 && this.onRightMenuClick('1'); }} />
							</div>
						</div>
						<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@e1w7rf`}
  sessionkey={dataKey}
  hasOrder={true}
  onOperatesClick={this.onOperatesClick}
  comsWeaTableStore={comsWeaTableStore}
  getColumns={this.getNewColumns}
  scroll={{ y: 400 }}
						/>
					</WeaRightMenu>
			  </WeaDialog>
				}
            </div>
        );
	}

	onOperatesClick = (record, index, operate, flag, argumentString) => {
        const { smsTempStore } = this.props;
		let operateType = operate.index;
         if (operateType == 0) {
			smsTempStore.showTempData(record.id);
        } else if (operateType == 1) {
			confirm({
				title: getLabel(131329, '信息确认'),
				content: (<span style={{ color: 'red' }}>{getLabel(15097, '确定要删除吗？')}</span>),
				onOk() {
					smsTempStore.doDel({ ids: record.id }).then((rdata) => {
						smsTempStore.doLoading();
					});
				},
				onCancel() {

				},
			});
        }
    }

	getTopButtons(dataKey, comsWeaTableStore) {
		const tableKey = dataKey !== '0' ? dataKey.split('_')[0] : 'init';
		const selectedRowKeys = toJS(comsWeaTableStore).selectedRowKeys;
		let btns = [
			<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xm8tt3@addBtn`} type="primary" onClick={() => { this.onRightMenuClick(0); }}>{getLabel(611, '添加')}</Button>,
			<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5j7w4z@batchDeleteBtn`} type="primary" disabled={selectedRowKeys.length === 0} onClick={() => { this.onRightMenuClick(1); }}>{getLabel(32136, '批量删除')}</Button>,
		];
		return btns;
    }

	// 右键菜单
    getRightMenu(dataKey, comsWeaTableStore) {
        let btns = [];
        const tableKey = dataKey !== '0' ? dataKey.split('_')[0] : 'init';
		const selectedRowKeys = toJS(comsWeaTableStore).selectedRowKeys;
		btns.push({
            icon: <i className="icon-coms-Add-to" />,
            content: getLabel(611, '添加'),
        });
        btns.push({
            icon: <i className="icon-coms-delete" />,
            disabled: selectedRowKeys.length === 0,
            content: getLabel(32136, '批量删除'),
        });
		btns.push({
			key: 'colSet',
			icon: <i className="icon-coms-Custom" />,
			content: getLabel(382660, '显示定制列'),
			onClick: (key) => {
				comsWeaTableStore.setColSetVisible(dataKey, true);
				comsWeaTableStore.tableColSet(dataKey, true);
			},
        });
        return btns;
	}

	// 右键菜单事件绑定
    onRightMenuClick(key) {
		const { smsTempStore } = this.props;
		const { dataKey, comsWeaTableStore } = smsTempStore;
		const tableKey = dataKey !== '0' ? dataKey.split('_')[0] : 'init';
		const selectedRowKeys = toJS(comsWeaTableStore).selectedRowKeys;
		let ids = '';
        if (key == '0') {
			smsTempStore.showTempData('');
		} else if (key == '1') {
			confirm({
				title: getLabel(131329, '信息确认'),
				content: (<span style={{ color: 'red' }}>{getLabel(15097, '确定要删除吗？')}</span>),
				onOk() {
					for (let i = 0; i < selectedRowKeys.length; i++) {
						if (ids != '') { ids += ','; }
						ids += selectedRowKeys[i];
					}
					smsTempStore.doDel({ ids }).then((rdata) => {
						smsTempStore.doLoading();
					});
				},
				onCancel() {
				},
			});
        }
    }
	// 自定义过滤渲染
    getNewColumns = (columns) => {
		const { smsTempStore } = this.props;
        let newColumns = '';
        newColumns = columns.map((column) => {
			let newColumn = column;
            // 表格的标题列的前端元素改造
            if (newColumn.dataIndex === 'title') {
                newColumn.render = (text, record, index) => {
                    // 通过record获取到当前行相对应的name
                    const valueSpan = record.titlespan.replace(/<([^<>]+)>/g, '');
                    return (
						<a onClick={() => {
							smsTempStore.showTempData(record.id);
							}}
  dangerouslySetInnerHTML={{ __html: valueSpan }}
						/>
                    );
                };
            }
            return newColumn;
        });
        return columns;
	}

    doClose =() => {
		this.props.doRefresh && this.props.doRefresh();
		this.props.doClose && this.props.doClose();
	}

	refreshList=() => {
		const { smsTempStore } = this.props;
		smsTempStore.doLoading();
		this.props.doRefresh && this.props.doRefresh();
	}
}

export default SmsTempList;
